<template>
  <!-- <view class="login_container">
    <view class="img_box">
      <image src="/static/xpsh.png" class="xpsh_img"></image>
    </view>
    <view class="login_box">
      <u-field
        v-model="params.user"
        label="账号"
        clearable
        class="user_input"
        placeholder="请输入账号"
        style="margin-bottom: 30upx !important"
        :border-bottom="false"
        trim 
        clear-size="35rpx"
      >
      </u-field>
      <u-field
        v-model="params.password"
        type="password"
        label="密码"
        clearable
        placeholder="请输入密码"
        trim 
        :border-bottom="false"
        clear-size="35rpx"
      >
      </u-field>

      <view class="login_btn" @tap="login">登录</view>
      <van-toast id="van-toast" />
    </view>
  </view> -->
  <view class="zai-box">
    <view class="login-box">
      	<image src="/static/xpsh.png" mode='aspectFit' class="zai-logo"></image>
		<view class="zai-form">
			<u-field class="zai-input"  v-model="params.user" placeholder-class placeholder="请输入用户名" :border-bottom="false" label-width="0"
        trim 
        clear-size="35rpx" />
			<u-field class="zai-input" placeholder-class  placeholder="请输入密码"  v-model="params.password"
        type="password"   trim label-width="0"
        :border-bottom="false"
        clear-size="35rpx"/>
			<button class="zai-btn" @tap="login">立即登录</button>
       <van-toast id="van-toast" />
		</view>
    </view>
	</view>
</template>

<script>
import app from "App.vue";
import { login1 } from "../../utils/imapi";
import { getData, setData } from "../../utils/storage";
export default {
  props: {},
  components: {},
  data() {
    return {
      // params: {
      //   user: "4",
      //   password: "xingkong",
      //   from_c: "1",
      //   login_type: "1",
      // },
      params: {
        user: "",
        password: "",
        from_c: "1",
        login_type: "1",
      },
      can_login: true,
    };
  },
  watch: {},
  onLoad() {},
  onReady() {},
  onShow() {},
  methods: {
    change_username(e) {
      this.params.user = e.detail;
    },
    change_password(e) {
      this.params.password = e.detail;
    },
    async login() {
      console.log(1111);
      if (this.params.user == "") {
        return uni.showToast({
          title: '请输入账号',
          duration: 2000,
          icon: "none",
        });
      }
      if (this.params.password == "") {
        return uni.showToast({
          title: '请输入密码',
          duration: 2000,
          icon: "none",
        });
      }
      // 验证账号密码

      if (this.can_login) {
        this.$toast.loading("登录中...");
        // 登录成功 把token放在 storage 和 vuex
        try {
          this.can_login = false;
          // const data = await login1({
          //   user: "353",
          //   password: "123456",
          //   from_c: "2",
          //   login_type: "1",
          // });
          const data = await login1(this.params);
          console.log(data);
          if (data.code == 0) {
            const date = new Date().getTime()/1000+24*60*60*2
            console.log(date);
            const token = data.data;
            setData("token", token);
            app.globalData.token = token
            uni.setStorageSync('expre_time', date)
            
            setTimeout(() => {
              // 跳转到首页
              uni.redirectTo({
                url: "/pages/index/index",
              });
              this.can_login = true;
            }, 1000);
          }
        } catch (error) {
          console.log(error);
          this.can_login = true;
          uni.showToast({
            title: "登录失败",
            icon: "none",
          });
        }
      }
    },
  },
  onReachBottom() {},
  onHide() {},
};
</script>

<style  lang="scss" scoped>
.login_container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.img_box {
  .xpsh_img {
    width: 680upx;
    height: 587upx;
    margin-top: 256upx;
    // margin-left: 102upx;
  }
}
.login_box {
  margin-top: 128upx;
}
/deep/ .custom-class {
  border-bottom: 2upx solid #e1e1e3 !important;
  margin-bottom: 10px;
}
.van-icon {
  margin: 10upx 36upx 0 36upx;
}
/deep/ .login_btn {
  width: 630upx;
  height: 88upx;
  background: #6d55ed;
  border-radius: 46upx;
  text-align: center;
  line-height: 88upx;
  color: #fff;
  margin-top: 58upx;
}
.user_input {
  margin-bottom: 30rpx;
}
.zai-box{
		padding: 0 100upx;
    height: 100vh;
		  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	}
  .login-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
  }
	.zai-logo{
		width:551rpx;
    height: 460rpx;
    // margin-top: 200rpx;
	}
	.zai-title{
		position: absolute;
		top: 0;
		line-height: 360upx;
		font-size: 68upx;
		color: #fff;
		text-align: center;
		width: 100%;
		margin-left: -100upx;
	}
	.zai-form{
		margin-top: 50upx;
    width: 100%;
	}
/deep/	.zai-input{
		background: #e2f5fc;
		margin-top: 30upx;
		border-radius: 100upx;
		font-size: 50upx !important;
	}
 /deep/ .u-field__input-wrap {
    font-size: 36rpx !important;
  }
	.input-placeholder, .zai-input{
		color: #94afce;
	}
	.zai-label{
		padding: 60upx 0;
		text-align: center;
		font-size: 30upx;
		color: #a7b6d0;
	}
	.zai-btn{
		background: #e60d8c;
		color: #fff;
		border: 0;
		border-radius: 100upx;
		font-size: 36upx;
    margin-top: 100rpx;
    box-shadow: 0px 2px 5px #c9c8c8
	}
	.zai-btn:after{
		border: 0;
	}
	/*按钮点击效果*/
	.zai-btn.button-hover{
		transform: translate(1upx, 1upx);
	}
</style>
